<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
    text-color="#fff" @open="handleOpen" @close="handleClose" :collapse="$store.state.homeview.navBool" router>
    <!-- 添加router属性 就是element提供的根据列表的index属性当成页面跳转路径 -->
    <!-- 循环路由数据   并且判断是否有二级菜单 -->
    <template v-for="(v,index) in router.options.routes[2].children" :key="'v'+index">
      <!-- 111111111111111设置index为path路径 -->
      <el-sub-menu :index="v.path" v-if="v.children">
        <template #title>
          <el-icon>
            <location />
          </el-icon>
          <!-- 添加展示数据 -->
          <span>{{ v.meta.title }}</span>
        </template>
        <!-- 循环二级菜单 -->
        <el-menu-item-group v-for="(val,index) in v.children" :key="'val'+index">
          <!-- 111111111111设置index为path路径 -->
          <el-menu-item :index="val.path">{{ val.meta.title }}</el-menu-item>

        </el-menu-item-group>
      </el-sub-menu>
      <!-- 不带下拉的列表 -->
      <!-- 1111111111设置index为path路径 -->
      <el-menu-item :index="v.path" v-else>
        <el-icon>
          <setting />
        </el-icon>
        <!-- 添加展示数据 -->
        <span>{{ v.meta.title }}</span>
      </el-menu-item>
      ​
    </template>
  </el-menu>
</template>
 
<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { onMounted } from "vue"
// 获取路由信息
import { useRouter } from "vue-router";
const router = useRouter();
onMounted(() => {
  console.log(router.options.routes)
  console.log(router.options.routes[2].children);
})
// 获取路由信息
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>